來到這次系列最後想講的主體：粒子效果

PixiJS 實現粒子效果有兩種方式：

• ParticleContainer
• pixi-particles

主要討論 pixi-particles，不過還是會介紹一些 ParticleContainer

ParticleContainer：

[ ParticleContainer 說明頁 ]

• 放入 ParticleContainer 裡的 sprite 與粒子只能使用 基本的變形如 position、scale、rotation 與 tint(v4.5.6起)，因此速度較快
• 無內建發射器，需手動處理所有粒子效果

官方 Demo (密集注意)：DEMOS-BASIC / Particle Container

pixi-particles：

pixi-particles ，PixiJS 官方另一個專案

• 有說明文件
• 有粒子編輯器可使用，可輸出調整好的 JSON 檔給開發者
• 有現成範例可參考如何實作

pixi-particles 說明頁：

• 文件結構與 PixiJS 本身不太相同
• 說明頁與 Pixi Particles 主頁幾乎一樣，多了右方各個類別與方法的說明

PixiParticlesEditor

相當實用的一頁，可直接看參數的影響

開始實作會遇到的問題

- 安裝 pixi-particles：

Installation

• PixiParticles can be installed or NPM.

npm install pixi-particles

• 沒有提到透過 cdn 安裝
• cdnjs 上沒有 pixi-particles，但在 jsdelivr 上有

<script src="https://cdn.jsdelivr.net/npm/pixi-particles@4.3.0/dist/pixi-particles.js"></script>

或者，也可透過範例直接找到 pixi-particles.js 這隻檔案

- 無法直接使用 pixi-particles 範例：

範例上的程式碼已封裝成 ParticleExample 類別

雖然不到看不懂，但無法直接使用

1. 直接從說明開始改寫：

pixi-particles 說明頁：

• 有 PIXI.particles.Emitter 的範例程式，但也無法直接使用

無法直接做成 Demo，缺少了幾樣東西：

• 沒有初始化 PIXI.Application，只提到了怎麼建立 PIXI.particles.Emitter
• 缺少 container
• 缺少 image.jpg

1. 沒有初始化 PIXI.Application，那就自己建一個：

onst app = new PIXI.Application({ backgroundColor: 0x1099bb });
document.body.appendChild(app.view);

就是最基本的 建立PIXI.Application

2. 沒有 container，建立一個並加到場景上

let emitterContainer = new PIXI.Container();
app.stage.addChild(emitterContainer);

3. 粒子圖

還行，先從Dmoe 上複製下來就好，是個放射狀半透明的粒子

等等，火焰用的粒子本體是這個？

• 這個範例實際上用了 particle.png(粒子狀) 與 Fire.png(片狀) 兩種

沒問題的話可看到在位置 (0, 0) 放射狀，顏色從紅到橘色的粒子效果 (僅發射一次)
[ Demo1 ]

2. 繼續調整與接上 PixiParticlesEditor 的設定：

• 說明頁使用 requestAnimationFrame 更新

// Update function every frame
var update = function () {

    // Update the next frame
    requestAnimationFrame(update);

    var now = Date.now();

    // The emitter requires the elapsed
    // number of seconds since the last update
    emitter.update((now - elapsed) * 0.001);
    elapsed = now;

    // Should re-render the PIXI Stage
    // renderer.render(stage);
};
// Start the update
update();

• 改寫為透過 app.ticker 更新

app.ticker.add((delta) => {
    var now = Date.now();
    // The emitter requires the elapsed
    // number of seconds since the last update
    emitter.update((now - elapsed) * 0.001);
    elapsed = now;
});

• 接上 PixiParticlesEditor：

PixiParticlesEditor 預設是一段淺藍到深藍的放射狀例子效果

點了 Download 後會下載一個 .json 檔，
將其內容放入 PIXI.particles.Emitter() 的建構式即可

[ Demo2 ]

3. 更改中心點：

從 ParticleExample.js 上可看到定位與更新粒子位置的方法

• 初始位置在舞台中心
• 滑鼠放開時，粒子位置更新到滑鼠座標上

// Center on the stage
this.emitter.updateOwnerPos(window.innerWidth / 2, window.innerHeight / 2);

// Click on the canvas to trigger
canvas.addEventListener('mouseup', (e) =>
{
  if (!this.emitter) return;

  // right click (or anything but left click)
  if (e.button)
  {
    if (testContainers)
    {
      if (++parentType >= 3) parentType = 0;
      const oldParent = emitterContainer;
      [emitterContainer, containerName] = getContainer();
      if (containerType) containerType.innerHTML = containerName;
      this.stage.addChild(emitterContainer);
      this.emitter.parent = emitterContainer;
      this.stage.removeChild(oldParent);
      oldParent.destroy();

      if (this.containerHook)
      {
        this.containerHook();
      }
    }
  }
  else
  {
    this.emitter.emit = true;
    this.emitter.resetPositionTracking();
    this.emitter.updateOwnerPos(e.offsetX || e.layerX, e.offsetY || e.layerY);
  }
});

調整我們的程式碼：

• 設定粒子初始位置，放置於畫面中間

emitter.updateOwnerPos(app.screen.width / 2, app.screen.height / 2);

• 畫面縮放時，重設粒子位置

window.onresize = function (event) {
    var w = window.innerWidth;
    var h = window.innerHeight;

    app.view.style.width = w + "px";
    app.view.style.height = h + "px";
    app.renderer.resize(w, h);

    emitter.resetPositionTracking();
    emitter.updateOwnerPos(app.screen.width / 2, app.screen.height / 2);
};
onresize();

[ Demo3 ]

完成基本準備！

大致上的準備工作差不多到這，接著

• 就能根據 PixiParticlesEditor 放上自己想要的效果了
• 也可根據 example 來做接著想做的事情

今日心得：

覺得 pixi-particles 的起步並不容易開始，希望這篇有幫到大家